<template>
  <div>
    <div class="title">
      <span>榜单推荐</span>
    </div>
    <van-divider class="margin"/>

    <van-grid :border="false" :column-num="3" :gutter="15">
      <van-grid-item @click="$router.push({name:'detail',params:{id:item.id}})" :key="index" v-for="(item, index) in toplist">
        <van-image :src="item.coverImgUrl" />
        <span style="font-size:10px;">{{item.name}}</span>
      </van-grid-item>
    </van-grid>

    <div class="title">
      <span>官方榜</span>
    </div>
    <van-divider class="margin"/>

    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了"> -->
      <van-cell  @click="$router.push({name:'detail',params:{id:item.id}})" v-for="(item,index) in detaillist" :key="index" >
        <div class="top">
          <van-image class="imagemargin" width="100px" :src="item.coverImgUrl" />
          <div class="topname">
            <span><span>{{item.tracks[0].first.slice(0,15)}} </span> - <span> {{item.tracks[0].second.slice(0,15)}}</span></span>
            <span><span>{{item.tracks[1].first.slice(0,15)}} </span> - <span> {{item.tracks[1].second.slice(0,15)}}</span></span>
            <span><span>{{item.tracks[2].first.slice(0,15)}} </span> - <span> {{item.tracks[2].second.slice(0,15)}}</span></span>
          </div>
        </div>
      </van-cell>
    <!-- </van-list> -->

    <div class="title">
      <span>其他榜单</span>
    </div>
    <van-divider class="margin"/>

    <van-grid :border="false" :finished="finished" :column-num="3" :gutter="15">
      <van-grid-item  @click="$router.push({name:'detail',params:{id:item.id}})" v-for="(item,index) in bottomlist" :key="index" >
        <van-image width="100" :src="item.coverImgUrl" />
        <span style="white-space: nowrap;-o-text-overflow:ellipsis;text-overflow: ellipsis;">{{item.name.slice(0,6)}}</span>
      </van-grid-item>
    </van-grid>

  </div>

</template>

<script>
import List from '@/api'
export default {
  data() {
    return {
      toplist: [],
      detaillist:[],
      bottomlist:[],
      loading: false,
      finished: true,
    };
  },
  methods: {
    getList(){
      let _this = this;
      List.getTopListDetail().then(function(res){
        let list = res.data.list;
        let olist = [];
        for(let l of list){
          if(l.tracks.length == 3){
            _this.detaillist.push(l);
          }else{
            olist.push(l);
          }
        }
        _this.toplist = olist.slice(0,3);
        _this.bottomlist = olist.slice(3, olist.length);
        //console.log(_this.bottomlist)
      });

    }
  },
  mounted(){
    this.getList();
  }  
};
</script>

<style scoped>
ooo{
  border: 1px solid #000;
}
.margin{
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 0px;
}
.title{
  height:40px; 
  line-height:75px; 
  display:flex;
  justify-content:space-between
}
.title span{
  margin-left: 25px;
  font-size: 18px;
}
.top{
  /* border: 1px solid #000; */
  display:flex;
}
.topname{
  /* border: 1px solid #000; */
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
}
.imagemargin{
  margin-left: 5px;
  margin-right: 25px;
}

</style>